﻿@page "/designer/{id:long}"
@using Dp.Wasm.IServices
@using Microsoft.JSInterop
@using System.Data
@inject IBigScreenService BigScreenService
<CascadingValue Value="this.BigScreen">
    <div class="dp-header">
        <div style="flex:2;display:flex">
            <Switch OnColor="Color.Primary" ShowInnerText="true" DisplayText="菜单栏" @bind-Value="@ShowMenuBox" OnInnerText="菜单栏" OnValueChanged="OnValueChangedByBool" />
            <Switch OnColor="Color.Primary" ShowInnerText="true" DisplayText="属性框" @bind-Value="@ShowPropertityBox" OnValueChanged="OnValueChangedByBool" />
        </div>
        <div style="flex:10">
            <Button Size="Size.ExtraSmall" OnClick="UpMove">上移</Button>
            <Button Size="Size.ExtraSmall" OnClick="DownMove">下移</Button>
            <Button Size="Size.ExtraSmall" OnClick="UpMove">置顶</Button>
            <Button Size="Size.ExtraSmall" OnClick="UpMove">置底</Button>
            <Button Size="Size.ExtraSmall" OnClick="Save">保存</Button>
            <Button Size="Size.ExtraSmall" OnClick="TestRead">测试读取</Button>
        </div>
        <div style="display:inline-block">
            <ThemeProvider DarkModeText="dark" LightModeText="light">主题</ThemeProvider>
        </div>
    </div>
    <div class="dp-content">
        @if (ShowMenuBox)
        {
            <div class="dp-left">
                <SharedPage.Components.BoxPanel BigScreen="BigScreen"></SharedPage.Components.BoxPanel>
            </div>
        }
        <div class="dp-middle" @onclick="async(e)=>{
await JsEcharts.removeClassForSelect();
}">
            <div id="designer" class="runing" style="@(BigScreen.Css.ToString())" ondragover="event.preventDefault();"
                 @ondrop="ondropFormBox">
                <SharedPage.Components.Runing @key="@BigScreen" BigScreen="@BigScreen" IsDesigner="true"></SharedPage.Components.Runing>
            </div>
        </div>
        @if (ShowPropertityBox)
        {
            <div class="dp-right">
                <SharedPage.Components.PropPanel BigScreen="@BigScreen"></SharedPage.Components.PropPanel>
            </div>
        }
    </div>
</CascadingValue>

@code {
    [Parameter]
    public long id { get; set; }
    [Inject]
    [NotNull]
    public JsInterOp? JsEcharts { get; set; }
    [Inject]
    [NotNull]
    private MessageService? Msg { get; set; }

    public BigScreen BigScreen { get; set; } = new() { InterVal = 1000 };

    public List<ComponentInfo> CopyList { get; set; } = new();

    public List<BigScreen>? BigScreens { get; set; }

    public bool ShowPropertityBox { get; set; } = true;
    public bool ShowMenuBox { get; set; } = true;
    protected override async void OnInitialized()
    {
        base.OnInitialized();
        // var res = await JsEcharts.getItems<BigScreen>();
        // if (res != null)
        // {
        //     BigScreenDesigner.BigScreens = res;
        // }
        // else
        // {
        //     BigScreenDesigner.BigScreens = new();
        // }
        // BigScreenDesigner.RefreshHandel = Refresh;
        // BigScreenDesigner.SelectedChangeHandel = BigScreenChanged;
        return;
        try
        {
            DataTable table = new DataTable("SampleTable");
            table.Columns.Add("列1", typeof(int));
            table.Columns.Add("列2", typeof(string));
            table.Columns.Add("列3", typeof(DateTime));
            table.Columns.Add("列4", typeof(bool));
            table.Columns.Add("列5", typeof(double));

            table.Rows.Add(1, "行1", DateTime.Now, true, 1.1);
            table.Rows.Add(2, "行2", DateTime.Now.AddDays(1), false, 2.2);
            table.Rows.Add(3, "行3", DateTime.Now.AddDays(2), true, 3.3);
            table.Rows.Add(4, "行4", DateTime.Now.AddDays(3), false, 4.4);
            ComponentInfo chart = new ComponentInfo();
            ComponentInfo chart2 = new ComponentInfo();
            chart.ComponentType = ComponentType.Line;
            chart.DataName = 1;
            chart.Option = new EOption()
                {
                    dataset = new EdataSet()
                    {
                        source = table
                    }

                };
            chart.Option.series = new List<ESerieBase>() { new SeriePie() { type = ESeriesType.line }, new SeriePie() { type = ESeriesType.line }, new SeriePie() { type = ESeriesType.line } };
            chart.Option.xAxis = new() { new ExAxis() { type = new JsVal(EType.category.ToString(), JsType.Enum) } };
            chart.Option.yAxis = new List<ExAxis>() { new ExAxis() };
            chart.Option.tooltip = new();
            chart.Option.legend = new();

            chart2.DataName = 2;
            chart2.Top = 50;
            chart2.Option = chart.Option;
            chart2.ComponentType = ComponentType.Line;
            Random r = new();
            BigScreen.Id = r.Next(10000);
            BigScreen.ChartList.Add(chart);
            //BigScreen.ChartList.Add(chart2);
        }
        catch (Exception ex)
        {

            throw ex;
        }
    }
    protected override async Task OnInitializedAsync()
    {

        // var res = await BigScreenService.GetBigScreens();
        // if (res.IsSucceeded)
        // {
        //     BigScreens = res.Data;
        // }
        await base.OnInitializedAsync();
    }
    protected override async Task OnParametersSetAsync()
    {
        await base.OnParametersSetAsync();
        //根据拿到的id,查询到整个BigScreen
        var res = await BigScreenService.GetBigScreen(id);
        if (res.IsSucceeded && res.Data != null)
        {
            BigScreen = res.Data;
            BigScreen.RefreshHandel = Refresh;
            await JsEcharts.Log(BigScreen);
        }
    }
    Random r = new();
    public void init()
    {
        //EChartIntence?.AddData(new object[] { r.Next(2020, 3000), r.Next(100), r.Next(100), r.Next(100) });
    }
    public void UpDate()
    {
        //EChartIntence?.RemoveAndAddData(new object[] { r.Next(2020, 3000), r.Next(100), r.Next(100), r.Next(100) });
    }
    public async void setOption()
    {

        var option = new
        {
            series = new[] { new { name = "xiaoliang", type = "bar", data = new[] { r.Next(100), 20, 36, 10, 10, 20 } } }
        };
        await JsEcharts.SetOption("asdfg", option);
    }

    private Task OnValueChangedByBool(bool val)
    {
        //todo 应该调用js  this.liChart[id].resize();
        return Task.CompletedTask;
    }
    /// <summary>
    /// 强制刷新当前选择的图表
    /// </summary>
    /// <param name="isResize"></param>
    /// <returns></returns>
    public async void Refresh(bool isResize = false)
    {
        //todo 应该调用js  this.liChart[id].resize();
        try
        {
            this.StateHasChanged();
            if (BigScreen.SelectedList.Count > 0 && isResize && BigScreen.SelectedList[0].Id != null)
            {
                await JsEcharts.Log(BigScreen.SelectedList[0]);
                await JsEcharts.SetOption(BigScreen.SelectedList[0].Id, BigScreen.SelectedList[0].Option, true);
                await JsEcharts.Resize(BigScreen.SelectedList[0].Id);
            }
        }
        catch (Exception ex)
        {
            ;
        }
    }

    private async void DownMove(MouseEventArgs e)
    {
        if (BigScreen.SelectedList.Count == 0)
        {
            await Msg.Show(new MessageOption()
                {
                    Content = "请选择一个组件",
                    Color = Color.Danger
                });
        }
        else if (BigScreen.SelectedList.Count > 1)
        {
            await Msg.Show(new MessageOption()
                {
                    Content = "不能选择多个组件",
                    Color = Color.Danger
                });
        }
        else
        {
            var res = BigScreen.ChartList.IndexOf(BigScreen.SelectedList[0]);
            if (res != 0)
            {
                BigScreen.ChartList.Swap(res, res - 1);
                this.StateHasChanged();
            }
            else
            {
                await Msg.Show(new MessageOption()
                    {
                        Content = "当前在最底层了",
                        Color = Color.Danger
                    });
            }

        }
    }
    private async void UpMove(MouseEventArgs e)
    {
        if (BigScreen.SelectedList.Count == 0)
        {
            await Msg.Show(new MessageOption()
                {
                    Content = "请选择一个组件",
                    Color = Color.Danger
                });
        }
        else if (BigScreen.SelectedList.Count > 1)
        {
            await Msg.Show(new MessageOption()
                {
                    Content = "不能选择多个组件",
                    Color = Color.Danger
                });
        }
        else
        {
            var res = BigScreen.ChartList.IndexOf(BigScreen.SelectedList[0]);
            var count = BigScreen.ChartList.Count;
            if (res == count - 1)
            {
                await Msg.Show(new MessageOption()
                    {
                        Content = "当前在最上层了",
                        Color = Color.Danger
                    });

            }
            else
            {
                BigScreen.ChartList.Swap(res, res + 1);
                this.StateHasChanged();
            }

        }
    }
    private async void Save(MouseEventArgs e)
    {
        //获取当前页面的缩略图,然后保存到根目录下  JsHtmlToCanvas 实现了
        Result result = new Result() { IsSucceeded = false };
        if (BigScreen != null)
        {
            result = await BigScreenService.Save(BigScreen);
        }
        if (result.IsSucceeded)
        {
            await Msg.Show(new MessageOption()
                {
                    Content = "保存成功",
                    Color = Color.Success
                });
        }
        else
        {
            await Msg.Show(new MessageOption()
                {
                    Content = $"保存失败:{result.ReturnMsg}",
                    Color = Color.Danger
                });
        }

    }
    private async void TestRead(MouseEventArgs e)
    {
        var ss = await JsEcharts.getItem<BigScreen>("大屏");
        await JsEcharts.Log(ss);
        await JsEcharts.Log(null);
    }
    void ondropFormBox(DragEventArgs e)
    {
        DataTable table = new DataTable("SampleTable");
        table.Columns.Add("产品", typeof(string));
        table.Columns.Add("总产量", typeof(int));
        table.Columns.Add("ok的", typeof(int));
        table.Columns.Add("Ng的", typeof(int));
        table.Columns.Add("时间", typeof(DateTime));
        table.Rows.Add("ping", 10, 100, 3, DateTime.Now.AddHours(1));
        table.Rows.Add("yifu", 20, 200, 53, DateTime.Now.AddHours(1));
        table.Rows.Add("shuage", null, 300, null, DateTime.Now.AddHours(1));
        table.Rows.Add("??", 40, 400, 3, DateTime.Now.AddHours(1));
        if (BigScreen.IsSelectedByToolBox)
        {
            BigScreen.ChartList.Add(BigScreen.SelectedByToolBox.ToComponent());
        }
        this.StateHasChanged();
    }
}




